<template>
  <view class="absolute top-0 left-0 h-100vh w-full z-999 open-screen-bg" v-if="show">
    <view class="position-center font-size-0">
      <view class="mb-84rpx">
        <wd-img 
          width="602rpx" 
          height="186rpx" 
          :src="openScreenTitle" 
          mode="aspectFill" 
        />
      </view>
      
      <view class="ml-244rpx mb-90rpx">
        <wd-img 
          width="356rpx" 
          height="62rpx" 
          :src="openScreenDesc" 
          mode="aspectFill" 
        />
      </view>
    </view>
    <view class="position-center-com w-full bottom-124rpx color-#fff flex-center">
      <wd-img 
        width="56rpx" 
        height="56rpx" 
        :src="openScreenIcon" 
        mode="aspectFill" 
      />
      <view class="ml-12rpx">正在获取单身资源，请稍后...</view>
    </view>
  </view>
</template>
  
<script lang="ts" setup>
import { openScreenTitle, openScreenDesc, openScreenIcon } from '@/static/base64';

const show = ref(true);
const timer = ref(null);
onMounted(() => {
  timer.value = setInterval(() => {
    show.value = false;
  }, 5000)
})

onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value);
    timer.value = null;
  }
})
</script>

<style lang="scss" scoped>
.open-screen-bg {
  background: linear-gradient( 130deg, #EBF4F9 0%, #9969F9 22%, #D0AADC 69%, #561FBB 100%);
}
</style>
      